<!-- 资产页面 -->
<template>
	<view :style="$store.state.skin">
		<view class="page container aui-content">
			<view class="">
				<!-- 自带的login（原文件没有东西）-start -->
				<view class="user-login"></view>
				<!-- 自带的login（原文件没有东西）-end -->

				<!-- 总资产块-start -->
				<view class="money-vip">
					<view class="money-vip-content">
						<view class="money-data">
							<text class="money-data-text">总资产(元)</text>
							<text class="money-data-number">{{ format(userinfo.total_assets) }}</text>
						</view>
						<view class="moner-balance">
							<view class="balance-text">
								<view class="balance-text-content">
									<text>账户余额</text>
									<view class="balance-number">
										<text>{{ format(userinfo.account_balance) || '0.00' }}</text>
									</view>
								</view>
								<view class="balance-text-today">
									<text class="today-text"></text>
									<text class="today-number"></text>
								</view>
							</view>
							<view class="balance-text">
								<view class="balance-text-content">
									<text>持仓市值</text>
									<view class="balance-number">
										<text>{{ format(userinfo.total_market_value) || '0.00' }}</text>
									</view>
								</view>
								<view class="balance-text-today">
									<text class="today-text"></text>
									<text class="today-number"></text>
								</view>
							</view>
							<view class="balance-text">
								<view class="balance-text-content">
									<text>今日持仓</text>
									<view class="balance-number">
										<text>{{ format(userinfo.today_holdMarketValue) || '0.00' }}</text>
									</view>
								</view>
								<view class="balance-text-today">
									<text class="today-text"></text>
									<text class="today-number"></text>
								</view>
							</view>
							<view class="balance-text">
								<view class="balance-text-content">
									<text>余额收益</text>
									<view class="balance-number">
										<text>{{ format(userinfo.balance_income) || '0.00' }}</text>
									</view>
								</view>
								<view class="balance-text-today">
									<text class="today-text"></text>
									<text class="today-number"></text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 总资产块-end -->

				<!-- 剩余资金表-start -->
				<view class="money-remainder">
					<!-- 资金分类表 -->
					<view class="remainder-list">
						<view class="list-col-xs-6">
							<view class="list-col-content">
								<text class="list-col-text">可用资金</text>
								<text class="list-col-number">{{ format(userinfo.account_balance) }}</text>
							</view>
						</view>
						<view class="list-col-xs-6">
							<view class="list-col-content">
								<text class="list-col-text">持仓保证金</text>
								<text class="list-col-number">{{ format(userinfo.total_earnest_money) }}</text>
							</view>
						</view>
						<view class="list-col-xs-6">
							<view class="list-col-content">
								<text class="list-col-text">累计盈亏</text>
								<text class="list-col-number">{{ format(userinfo.cumulative_PL) }}</text>
							</view>
						</view>
						<view class="list-col-xs-6">
							<view class="list-col-content">
								<text class="list-col-text">浮动盈亏</text>
								<text class="list-col-number">{{ format(userinfo.total_float_PL) }}</text>
							</view>
						</view>
					</view>

					<!-- 资金风险状况 -->
					<view class="remainder-state">
						<view class="state-content">
							<view class="state-content-text">
								<view class="aui-text-white text-white-12">资产风险状态</view>
								<view class="aui-text-white text-white-13">{{ userinfo.asset_risk_status }}</view>
								<view class="aui-text-white text-white-14">账户无平仓危险</view>
								<!-- 动画效果 -->
								<view class="risk-wave">
									<view class="water_waves" v-if="userinfo.asset_risk_value">
										<view class="risk-wave-txt">
											{{ userinfo.asset_risk_value || 0 + '%' }}
										</view>
										<view class="water_wave1" :style="'top:' + (100 - Number(userinfo.asset_risk_value.split('%')[0])) + '%'"></view>
										<view class="water_wave2" :style="'top:' + (100 - Number(userinfo.asset_risk_value.split('%')[0])) + '%'"></view>
										<view class="water_wave3" :style="'top:' + (100 - Number(userinfo.asset_risk_value.split('%')[0])) + '%'"></view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 持仓收益 -->
					<!-- <view class="remainder-position">
									<view class="position-content">
										<view class="position-content-text">
											<view class="position-texts">
												持仓收益
											</view>
											<view class="position-number">
												{{123format(earnings)}}
											</view>
										</view>
									</view>
								</view> -->
				</view>
				<!-- 剩余资金表-end-->

				<!-- 最后的背景条-start -->
				<!-- <view class="asset-height"></view> -->
				<!-- 最后的背景条-end -->
			</view>
		</view>
	</view>
</template>

<script>
import request from '@/api/request.js';
import webSocketMixin from '@/api/socket.js';
export default {
	mixins: [webSocketMixin],
	onLoad() {},
	onShow() {
		// 设置导航栏颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
		    backgroundColor: this.$store.state.presentColor
		});
		
		if (uni.getStorageSync('userData')) {
			this.getInfo(uni.getStorageSync('userData').token);
		} else {
			uni.reLaunch({
				url: '/pages/login/login'
			});
		}
	},
	onHide() {
		if (this.socketTask) {
			this.socketTask.close();
		}
	},
	data() {
		return {
			userinfo: {
				account_balance: '0.00',
				account_freeze: false,
				cumulative_PL: '0.00',
				list: [],
				today_float_PL: '0.00',
				total_assets: 0.0,
				total_earnest_money: 0.0,
				total_float_PL: '0.00',
				total_market_value: '0.00'
			},
			socketTask: null
		};
	},
	methods: {
		async getInfo(token) {
			this.socketTask = await this.handleConnectWebSocket(`?type=asset&token=${token}`);
			this.socketTask.onMessage((res) => {
				let data = JSON.parse(res.data);
				console.log('资产', data);
				if (data.total_assets) {
					this.userinfo = data;
					uni.setStorageSync('assetData', data);
				}
			});

			// uni.connectSocket({
			// 	url: 'wss://api.icode2023.top/wss?type=asset&token='+token,
			// });
			// uni.onSocketMessage((res)=>{
			// 	if(JSON.parse(res.data).totalAssets){
			// 		this.userinfo =JSON.parse(res.data);
			// 		uni.setStorageSync('assetData',res.data)
			// 	}
			// })
			// uni.onSocketOpen(function(res) {
			// 	console.log('WebSocket连接已打开！');
			// 	const data = {
			// 		type: 'asset'
			// 	};
			// 	const jsonData = JSON.stringify(data);

			// 	uni.sendSocketMessage({
			// 		data: jsonData,
			// 		success: function() {
			// 			console.log('信息发送成功');
			// 		},
			// 		fail: function() {
			// 			console.log('信息发送失败');
			// 		}
			// 	});
			// });
		},
		// 定义一个方法（类似于vue2的过滤器），然后将后端返回的数据进行千分位格式化
		format(num) {
			// 分割成一个数组(现在数据是字符串，就不需要转字符串，如果是数字就需要转字符串格式)
			// let parts = num.split(".");
			// // let parts = toString(num).split(".");
			// // 这里加上一个倒序，不然遍历出来的数据是从大到小
			// let arr = parts[0].split('').reverse()
			// let res = "";

			// arr.forEach((item, index) => {
			// 	if (index % 3 === 0 && index !== 0) {
			// 		res = "," + res;
			// 	}
			// 	res = item + res;
			// });

			// if (parts.length === 2) {
			// 	let decimal = parts[1].substr(0, 2);
			// 	res += `.${decimal}`;
			// } else {
			// 	res += ".00";
			// }
			return num;
		}
	}
};
</script>

<style lang="scss">
// 最外层容器-start
.aui-content {
	background: #fff var(--mine-bg) no-repeat top center;
	background-size: 100% 8.5rem;
	padding-bottom: 3rem;
	background-color: #fff !important;
	line-height: 1.5;

	// login
	.user-login {
		height: 2rem;
		width: 32%;
		padding: 0.6rem;
	}
}

// 最外层容器-end

// 总资产块-start
.money-vip {
	padding: 0.6rem 0.6rem 0 0.6rem;
	margin-bottom: 0.75rem !important;

	.money-vip-content {
		background: #fff !important;
		border-radius: 0.4rem;
		padding: 0.7rem 0 0.3rem 0;
		box-shadow: 0px 0px 5px 2px #ddd;

		.money-data {
			display: flex;
			flex-direction: column;
			padding: 0 0.5rem 0.5rem 0.5rem !important;

			.money-data-text {
				font-size: 0.7rem;
				color: #212121 !important;
			}

			.money-data-number {
				font-size: 1.5rem;
				color: #343434 !important;
				font-weight: bold;
				line-height: 1.5;
			}
		}
	}

	.moner-balance {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;

		// 提取-start
		.balance-text {
			border-bottom: 1px solid #eee;
			display: flex;
		}

		.balance-text-content {
			display: flex;
			justify-content: space-between;
			padding-top: 1.5rem !important;
			padding-bottom: 1.5rem !important;
			width: 100%;

			.balance-number {
				border-right: 1px solid #eee;
				padding-right: 0.75rem !important;
			}
		}

		.balance-text-today {
			display: flex;
			flex-direction: column;
			padding: 1.2rem 0 1.2rem 0.5rem;

			.today-text {
				font-size: 0.6rem !important;
				color: #b3b3b3 !important;
				line-height: 1.5;
			}

			.today-number {
				color: #ed1e28;
				font-size: 0.7rem !important;
				line-height: 1.5;
			}
		}

		// 提取-end
	}
}

// 总资产块-end

// 剩余资金表-start
.money-remainder {
	background: #f2f2f2 !important;
	padding-top: 0.5rem !important;
	padding-bottom: 0.5rem !important;

	// 资金列表
	.remainder-list {
		display: flex;
		flex-wrap: wrap;

		.list-col-xs-6 {
			width: 50%;

			.list-col-content {
				margin: 0 0.5rem 0.5rem 0.5rem;
				padding: 1rem 0.5rem;
				border-radius: 0.3rem;
				background: #fff;
				display: flex;
				flex-direction: column;

				.list-col-text {
					font-size: 0.9rem !important;
					line-height: 1.5;
				}

				.list-col-number {
					line-height: 1.5;
				}
			}
		}
	}

	// 资金状态
	.remainder-state {
		background: #f2f2f2;
		padding: 0.75rem 0.6rem;
		margin-bottom: 0.75rem !important;
		margin-top: 0.75rem !important;
		position: relative;

		.state-content {
			background: #14896c;
			border-radius: 0.4rem;
			padding-bottom: 0.75rem !important;

			.state-content-text {
				padding: 0.75rem !important;

				.aui-text-white {
					color: #ffffff !important;
				}

				.text-white-12 {
					font-size: 0.7rem !important;
				}

				.text-white-13 {
					font-size: 1.5rem !important;
					margin-bottom: 0.75rem !important;
					margin-top: 0.75rem !important;
				}

				.text-white-14 {
					font-size: 0.6rem !important;
				}
			}

			// 动画效果
			.risk-wave {
				position: absolute;
				right: 1.5rem;
				top: 1.4rem;

				.water_waves {
					width: 100px;
					height: 100px;
					border: 1px solid #ccc;
					border-radius: 50%;
					margin: auto;
					position: relative;
					background-color: #c8d5d1;
					overflow: hidden;
					animation: water-waves linear infinite;

					@keyframes water-waves {
						0% {
							transform: rotate(0deg);
						}

						100% {
							transform: rotate(360deg);
						}
					}

					.risk-wave-txt {
						color: #14141e;
						font-size: 1rem;
						position: absolute;
						top: 10px;
						z-index: 9;
						width: 100%;
						text-align: center;
					}

					.water_wave1 {
						animation: inherit;
						animation-duration: 10s;
						background-color: #33cfff;
						position: absolute;
						width: 200%;
						height: 200%;
						top: 40%;
						left: -25%;
						opacity: 0.7;
						border-radius: 40%;
					}

					.water_wave2 {
						animation: inherit;
						animation-duration: 12s;
						position: absolute;
						width: 200%;
						height: 200%;
						background-color: #0eaffe;
						top: 45%;
						left: -35%;
						border-radius: 35%;
						opacity: 0.5;
					}

					.water_wave3 {
						animation: inherit;
						animation-duration: 16s;
						position: absolute;
						width: 200%;
						height: 200%;
						top: 50%;
						left: -35%;
						opacity: 0.3;
						background-color: #0f7ae4;
						border-radius: 33%;
					}
				}
			}
		}
	}

	// 持仓收益
	.remainder-position {
		background: none;
		padding: 0.6rem 0.6rem 0 0.6rem;
		margin-bottom: 0.75rem !important;

		.position-content {
			background-color: #ffffff;
			border-radius: 0.4rem;
			padding: 0.7rem 0 0.3rem 0;

			.position-content-text {
				padding: 0 0.5rem 0.5rem 0.5rem !important;

				.position-texts {
					font-size: 0.8rem !important;
				}

				.position-number {
					color: #ed1e28 !important;
					font-size: 1.2rem;
				}
			}
		}
	}
}

// 剩余资金表-end

// 最后的背景条
.asset-height {
	background-color: #fff;
	padding-top: 1rem;
	padding-bottom: 3rem !important;
}
</style>
